<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane :label="title" name="tab-0">
      <div class="edit-handles-con">
        <el-collapse v-model="eventTabs">
          <el-collapse-item title="通用属性" name="cmmmon">
            <el-form class="margin-bottom-10">
              <input-normal label="组件类型" v-model="componentData.type" disabled="disabled"></input-normal>
              <input-normal label="组件id" v-model="getComId.id" @change="onChangeAttrId"></input-normal>
              <switch-normal v-model="commonAttr.isPageFixed" label="全局固定布局" @change="onChangeAttr"></switch-normal>
              <dropdown-normal label="方位类型" :valLists="POSITION_TYPES" v-model="commonAttr.positionType" @change="onChangeAttr"></dropdown-normal>
              <switch-normal v-model="commonAttr.isBottom" label="距离底部" @change="onChangeAttr"></switch-normal>
              <switch-normal v-model="commonAttr.isRight" label="距离右边" @change="onChangeAttr"></switch-normal>
              <input-normal v-if="commonAttr.isRight" label="距离右边距离" v-model="commonAttr.right" @change="onChangeAttr"></input-normal>
              <input-normal label="属性关联id" v-model="commonAttr.relateAttrCompId" @change="onChangeAttr"></input-normal>
              <input-normal v-model="commonAttr.itemIndex" label="索引或键值" placeholder="0-9或uid、mid" @change="onChangeAttr"></input-normal>
              <input-normal label="事件关联id" v-model="commonAttr.relateEventCompId" @change="onChangeAttr"></input-normal>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="组件属性" name="comp">
            <slot></slot>
            <el-form>
              <el-divider content-position="center">通用属性</el-divider>
              <input-normal label="设计宽度" v-model="commonAttr.designWidth" @change="onChangeAttr"></input-normal>
              <input-normal label="设计高度" v-model="commonAttr.designHeight" @change="onChangeAttr"></input-normal>
              <textarea-normal v-if="isCustomFontStyle" label="自定义字体" placeholder="字体名，字体文件url" v-model="commonAttr.customFontStyle" @change="onChangeAttr"></textarea-normal>
            </el-form>
          </el-collapse-item>
          <right-position></right-position>
        </el-collapse>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { useWebControlsStore } from '@/store/web/controls'
import { isHasOwnProperty } from '@/utils/'
import { TEXT_STYLES, TEXT_STYLES_, POSITION_TYPES, BORDER_STYLES, FontFamilys } from '@/const/web/'
import { COMPONENT_TYPES } from '@/const/'

const props = defineProps<{ 
  title: string,
}>()

const useWebComponent = useWebComponentStore()
const useWebControls = useWebControlsStore()
const isDebug = computed(() => {
  //@ts-ignore
  return process.env.NODE_ENV === 'production' ? false : true
})
const eventTabs = ['comp', 'position']
const tabName = 'page'
const tabNames = useWebComponent.tabNames
const textStyles = _.cloneDeep(TEXT_STYLES)
const textStyles_ = _.cloneDeep(TEXT_STYLES_)

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
let getComId_: any
const getComId = computed(() => {
  getComId_ = { id: componentData_!.id }
  return getComId_
})

const isCustomFontStyle = computed(() => {
  return isHasOwnProperty(componentData_?.commonAttr, 'customFontStyle')
})

const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const onChangeAttrId = () => {
  useWebComponent.updateCurrentComponentData({ id: componentData_.id })
  useWebControls.setControlById({ compId: componentData_.id, newCompId: getComId_.id })
}
const onUpdateTab = () => {
  const params: any = {}
  params[tabName] = useWebComponent.tabNames[tabName]
  useWebComponent.updateTab(params)
}

</script>


